A heat map like chart using the drawing API rect object

This chart was inspired by Facebooks "heat map"-esque visualisation for determining what computers (though it doesn't have to be computers) are either malfunctioning or sending alerts. In a large datacenter each column could be a particular rack and each individual square a specific computer.

Each individual square is a drawing API Rect object - so each can be assigned its own tooltip, colors and click/mousemove events.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.drawing.rect.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    /**
    * The "data" that determines the colour of the blocks
    */
    alerts = [];
    alerts['34,7'] = {'color':'red','message':'Computer #37 is broken and needs shutting down and repairing'}
    alerts['52,7'] = {'color':'red','message':'Computer #68 is broken and needs shutting down and repairing'}
    alerts['53,7'] = {'color':'red','message':'Computer #69 is broken and needs shutting down and repairing'}
    alerts['54,7'] = {'color':'red','message':'Computer #70 is broken and needs shutting down and repairing'}
    alerts['14,19'] = {'color':'red','message':'Computer #135 is running hot','color':'yellow'}
    alerts['14,20'] = {'color':'red','message':'Computer #139 is loose','color':'yellow'}
    alerts['14,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
    alerts['45,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
    alerts['2,2'] = {'color':'red','message':'Computer #139 needs replacing','color':'orange'}
    alerts['18,5'] = {'color':'red','message':'Computer #139 needs repairing','color':'red'}

    window.onload = function ()
    {
        // 25 "clusters of computers" (sticking to the datacenter analogy)
        for (var y=0; y<25; ++y) {
        
            // 60 "Computers per cluster" (sticking to the datacenter analogy)
            for (var x=0; x<60; ++x) {
                var rect = new RGraph.Drawing.Rect({
                    id: 'cvs',
                    x: x*10,
                    y: y*10,
                    width: 10,
                    height: 10,
                    options: {
                        strokestyle: 'rgba(0,0,0,0.05)'
                    }
                })

                if (alerts[x+','+y]) {
                    rect.set({
                        fillstyle: alerts[x+','+y].color,
                        tooltips: [alerts[x+','+y].message]
                    })
                } else {
                    rect.set('fillstyle', 'rgba(100,255,100,0.2)');
                }

                rect.draw();
            }
        }
    };
</script>